import React from 'react'
import "./index.css"
import { nanoid } from 'nanoid'

export default function Header({ todoList, setTodoList }) {
  //键盘按压事件
  const publish = (e) => {

    if (e.keyCode === 13) {
      //输入框内容
      let publishValue = e.target.value.trim()
      if(!publishValue) return alert("不能为空")
      //增加数据 增加的是对象
      let newObj = { id: nanoid(), todo: publishValue, done: false }
      //合并内容
      setTodoList([newObj,...todoList])
      //清空输入框
      e.target.value = ""
    }

  }

  return (
    <div className="todo-header">
      <input type="text" onKeyUp={publish} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
